<template>
    <view>
        <view class="date-container">
            <tm-icon @click="handlePrevFate" :font-size="28" name="tmicon-angle-left"></tm-icon>
            <tm-text class="mx-20" :font-size="48" _class="text-weight-b" color="#333333"
                :label="todayFormat"></tm-text>
            <tm-icon @click="handleNextFate" :font-size="28" name="tmicon-angle-right"></tm-icon>
        </view>
        <view class="personal-info-container">
            <PersonalInfo :personalInfo="personalInfo" />
        </view>
        <view class="fate-container">
            <FateInfo :fateInfo="fateInfo" />
        </view>
    </view>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
import { ref, computed, onMounted } from 'vue';
import FateInfo from '../FateInfo/FateInfoContainer.vue'
import PersonalInfo from '../PersonalInfo/PersonalInfoView.vue'
import { useFateStore } from '@/stores/fate.ts'

const fateStore = useFateStore();

const date = ref(dayjs())

const personalInfo = ref({});
const fateInfo = ref({});

const isDisabledNextFate = computed(() => {
    return dayjs().isSame(date.value, 'day')
})

const todayFormat = computed(() => {
    const chineseMonths = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']
    const chineseNumbers = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十',
        '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
        '二十一', '二十二', '二十三', '二十四', '二十五', '二十六', '二十七', '二十八', '二十九', '三十', '三十一']
    const month = chineseMonths[dayjs(date.value).month()]
    const day = chineseNumbers[dayjs(date.value).date()]
    return `${month}月${day}日`
})

const handleNextFate = () => {
    if (isDisabledNextFate.value) return;
    date.value = date.value.add(1, 'day')
    init()
}

const handlePrevFate = () => {
    date.value = date.value.subtract(1, 'day')
    init()
}

const init = async () => {
    const param = { date: date.value.format('YYYY-MM-DD') }
    const info = await fateStore.queryTodayFate(param)
    personalInfo.value = info.personalInfo;
    fateInfo.value = info.fateInfo;
}

onMounted(() => {
    init()
})
</script>
<style lang="less" scoped>
.date-container {
    display: flex;
    justify-content: center;
    padding: 22rpx 0 28rpx;
}

.personal-info-container {
    padding: 0 40rpx;
    margin-bottom: 50rpx;
}

.fate-container {
    padding: 0 30rpx;
}
</style>